<template>
    <div class="pie">

    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'MyAppMyPie',

    data() {
        return {

        };
    },

    mounted() {
        this.getPie()
    },

    methods: {
        getPie() {
            let myPie = echarts.init(document.querySelector('.pie'))
            let option = {

                tooltip: {
                    trigger: "item",
                    formatter: "{a}</br> {b}:{c} ({d}%)",
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: ['10%', '60%'],
                        center: ['50%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 0
                        },
                        data: [
                            { value: 40, name: 'rose 1' },
                            { value: 38, name: 'rose 2' },
                            { value: 32, name: 'rose 3' },
                            { value: 30, name: 'rose 4' },
                            { value: 28, name: 'rose 5' },
                            { value: 26, name: 'rose 6' },
                            { value: 22, name: 'rose 7' },
                            { value: 18, name: 'rose 8' }
                        ]
                    }
                ]
            };
            myPie.setOption(option)
            window.addEventListener('resize', function () {
                myPie.resize()
            })
        }
    },
};
</script>

<style lang="scss" scoped>

</style>